<template>
  <aside class="aside">
    <el-menu
      router
      :default-active="$router.path"
      :style="heights"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      unique-opened
      :default-openeds="defaultOpeneds"
    >
      <template v-for="(item,index) in $router.options.routes">
        <template v-if="!item.hidden">
          <el-submenu :index="index+''" :key="index" :default-active="index">
            <template slot="title">
              <i :class="item.iconCls"></i>
              <span slot="title">{{item.name}}</span>
            </template>
            <template v-for="(item2) in item.children">
              <template v-if="!item2.hidden">
                <el-menu-item
                  :index="item.path+'/'+item2.path"
                  :key="item.path+'/'+item2.path "
                  :route="item.path+'/'+item2.path"
                  :class="(item.path+'/'+item2.path)==defaultActive?'dfactive':''"
                  @click="menuitems(index)"
                >
                  <i :class="item2. iconCls"></i>
                  {{item2.name}}
                </el-menu-item>
              </template>
            </template>
          </el-submenu>
        </template>
      </template>
    </el-menu>
  </aside>
</template>
<script>
export default {
  name: "asides",
  data() {
    return {
      isCollapse: false, //控制侧边栏
      heights: "",
      defaultOpeneds: ["2"],
      defaultActive: ""
    };
  },
  computed: {
    getiscolls() {
      return this.$store.state.iscoll;
    }
  },
  watch: {
    getiscolls: {
      handler(newVal, oleVal) {
        console.log(newVal, oleVal, "1");
        this.isCollapse = newVal;
      },
      deep: true
    },

    "$route.path": {
      handler(newVal) {
        this.setactive(newVal);
      },
      deep: true
    }
  },
  created() {},
  mounted() {
    this.init();
    this.setactive(this.$route.path);
    let str = sessionStorage.getItem("defint");
    if (str) {
      this.defaultOpeneds = JSON.parse(str);
    }
  },
  methods: {
    setactive(data) {
      this.defaultActive = data;
      console.log(this.defaultActive);
    },
    handleOpen() {
      // this.defaultOpeneds = [key];
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    menuitems(id) {
      this.defaultOpeneds = ["" + id + ""];
      let str = JSON.stringify(this.defaultOpeneds);
      sessionStorage.setItem("defint", str);
    },
    init() {
      let hi = window.innerHeight;
      if (hi < 510) {
        hi = 700;
      }
      this.heights = {
        height: hi - 60 + "px"
      };
    }
  }
};
</script>
<style lang="scss">
.dfactive {
  color: #ffffff !important;
  background-color: rgb(0, 110, 255) !important;
}
</style>